<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
		body {
			background: #333;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

		canvas {
			background: #fff;
		}
	</style>
</head>

<body>
	<!-- 画板, 画笔 -->
	<canvas id="canvas" width="500" height="500"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */ // 提示补全

		const oCanvas = document.getElementById('canvas');
		const ctx = oCanvas.getContext('2d'); //拿到画笔

		// 填充矩形
		// ctx.fillRect(
		//     100, 50,
		//     100, 100
		// )

		// 描边矩形
		ctx.strokeRect(
			100, 100,
			100, 100
		)

		// 圆形
		// ctx.arc(
		//     100, 100,
		//     50, 0, 2 * Math.PI,
		//     false
		// )
		// ctx.stroke() // 描边
		// ctx.fill() // 填充

		// 圆弧
		// ctx.arc(
		//     100, 100,
		//     50, .5, 1.5 * Math.PI,
		//     false
		// )
		// ctx.fill()

		// 直线
		ctx.moveTo(400, 200)
		ctx.lineTo(400, 0)
		ctx.lineTo(200, 200)
		ctx.closePath()
		ctx.strokeStyle='rgba(0,0,0,.2)'
		// TODO 在没有调用 ctx.beginPath()时，每调用一次ctx.stroke()，之前的路径都会重新话一次，所以这里的线颜色被后面的覆盖了
		ctx.stroke()
		ctx.stroke()
		ctx.stroke()
		// ctx.beginPath()

		
		//  二次曲线
		// ctx.strokeStyle = 'red'
		// ctx.moveTo(100, 100)
		// ctx.quadraticCurveTo(
		//   180, 10,
		//   170, 50
		// )
		// ctx.stroke()

		// 两个切线之间的弧
		ctx.strokeStyle = 'deeppink'
		ctx.moveTo(100, 100);
		ctx.arcTo(
			100, 200, //两切线交点的 横/纵坐标。
			250, 200, //第二条切线上任意一点的 横/纵坐标，不能和相交点一样。
			50 //弧的半径。
		);
		ctx.arcTo(300, 200, 300, 400, 50);
		ctx.stroke();

		// 重置变换矩阵
		// ctx.setTransform(a,b,c,d,e,f)
		ctx.setTransform(
			1, // 水平缩放
			0, // 水平倾斜
			0, // 垂直倾斜
			1, // 垂直缩
			0, // 水平移动
			0, // 垂直移动
		)

	</script>
</body>

</html>